<script setup lang='ts'>
import { computed, ref } from 'vue'
import { NDropdown } from 'naive-ui'
import AvatarComponent from './Avatar.vue'
import TextComponent from './Text.vue'
import { SvgIcon } from '@/components/chat/index'
import { copyText } from '@/utils/format'
import { useIconRender } from '@/hooks/chat/useIconRender'
import { t } from '@/locales'
import { useBasicLayout } from '@/hooks/chat/useBasicLayout'

interface Props {
  dateTime?: string
  text?: string
  inversion?: boolean
  error?: boolean
  loading?: boolean
}

interface Emit {
  (ev: 'regenerate'): void
  (ev: 'delete'): void
}

const props = defineProps<Props>()

const emit = defineEmits<Emit>()

const { isMobile } = useBasicLayout()

const { iconRender } = useIconRender()

const textRef = ref<HTMLElement>()

const asRawText = ref(props.inversion)

const messageRef = ref<HTMLElement>()

const options = computed(() => {
  const common = [
    {
      label: t('chat.copy'),
      key: 'copyText',
      icon: iconRender({ icon: 'ri:file-copy-2-line' }),
    }
  ]

  if (!props.inversion) {
    common.unshift({
      label: asRawText.value ? t('chat.preview') : t('chat.showRawText'),
      key: 'toggleRenderType',
      icon: iconRender({ icon: asRawText.value ? 'ic:outline-code-off' : 'ic:outline-code' }),
    })
  }

  return common
})

function handleSelect(key: 'copyText' | 'delete' | 'toggleRenderType') {
  switch (key) {
    case 'copyText':
      copyText({ text: props.text ?? '' })
      return
    case 'toggleRenderType':
      asRawText.value = !asRawText.value
      return
    case 'delete':
      emit('delete')
  }
}

function handleRegenerate() {
  messageRef.value?.scrollIntoView()
  emit('regenerate')
}
</script>

<template>
    <div class="overflow-hidden text-sm " :class="[inversion ? 'items-end' : 'items-start']">
        <n-space v-if="inversion" justify="right">
            <p   :class="[inversion ? 'text-right' : 'text-left']">
                {{ dateTime }} <AvatarComponent :image="inversion" />
            </p>
        </n-space>
        <n-space v-else>
            <p   :class="[inversion ? 'text-right' : 'text-left']">
                 <AvatarComponent :image="inversion" /> {{ dateTime }}
            </p>
        </n-space>
            <n-space justify="end" v-if="inversion" >
                <n-alert :show-icon="false">
                    <div  v-text="text" />
                </n-alert>
            </n-space>
            <n-space  v-else>
                <n-alert  type="success" :show-icon="false">
                    <TextComponent
                        ref="textRef"
                        :inversion="inversion"
                        :error="error"
                        :text="text"
                        :loading="loading"
                        :as-raw-text="asRawText"
                    />
                </n-alert>
            </n-space>
<!--            <div class="flex flex-col">-->

<!--                <NDropdown-->
<!--                    :trigger="isMobile ? 'click' : 'hover'"-->
<!--                    :placement="!inversion ? 'right' : 'left'"-->
<!--                    :options="options"-->
<!--                    @select="handleSelect"-->
<!--                >-->
<!--                    <button class="transition text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-200">-->
<!--                        <SvgIcon icon="ri:more-2-fill" />-->
<!--                    </button>-->
<!--                </NDropdown>-->
<!--            </div>-->
    </div>
</template>
